<template>
  <div id="">
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <swiper-slide v-for="banner in bannerImg" :key="banner.key">
        <img :src="banner.imgUrl" alt="" width="100%">
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination">

      </div>
    </swiper>
  </div>
</template>
<script>
export default {
  name: "",
  data: () => ({
    swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        slidesPerView: 1,
        freeMode: false,
        paginationClickable: true,
        loop: true,
        autoplay:true,
        centeredSlides: true,
        onTouchEnd: function() {
            swiper.startAutoplay()
        }
     },
     bannerImg:[{
       imgUrl:require('@/assets/sportsMall/banner1.png'),
     },{
       imgUrl:require('@/assets/sportsMall/banner2.png'),
     }]
  })
}
</script>
<style lang="scss">
.swiper-pagination-bullet{
  height: 6px;
  width: 6px;
}
.swiper-pagination-bullet-active{
  width: 20px;
  border-radius: 10px;
}
</style>
